<div [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div
		class="container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm"
		[ngClass]="['bg' + contrast]"
	>
		<div class="flex items-center justify-between">
			<span class="text-sm" [ngClass]="['text' + plainInv]">Jun 1, 2020</span>
			<a
				rel="noopener noreferrer"
				href="#"
				class="px-2 py-1 font-bold rounded"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				Javascript
			</a>
		</div>
		<div class="mt-3">
			<a rel="noopener noreferrer" href="#" class="text-2xl font-bold hover:underline">
				Nos creasse pendere crescit angelos etc
			</a>
			<p class="mt-2">
				Tamquam ita veritas res equidem. Ea in ad expertus paulatim poterunt. Imo volo aspi
				novi tur. Ferre hic neque vulgo hae athei spero. Tantumdem naturales excaecant
				notaverim etc cau perfacile occurrere. Loco visa to du huic at in dixi aër.
			</p>
		</div>
		<div class="flex items-center justify-between mt-4">
			<a
				rel="noopener noreferrer"
				href="#"
				class="hover:underline"
				[ngClass]="['text' + primary]"
			>
				Read more
			</a>
			<div>
				<a rel="noopener noreferrer" href="#" class="flex items-center">
					<img
						src="https://source.unsplash.com/50x50/?portrait"
						alt="avatar"
						class="object-cover w-10 h-10 mx-4 rounded-full bg-gray-500"
					/>
					<span class="hover:underline" [ngClass]="['text' + plainInv]">
						Leroy Jenkins
					</span>
				</a>
			</div>
		</div>
	</div>
</div>
